<template>
    <div class="basicWrapper">
        <h2 class="formH2"><span></span>机构认证信息</h2>
        <span @click="handleBackTo()" class="handleBack">返回基本信息</span>
        <div class="allWrapper" v-loading="loading">
            <div class="enterpriseForm">
                <el-form :model="form" :inline="true" :rules="rules" ref="form" label-width="170px" class="demo-ruleForm">
                    <el-form-item label="机构名称" prop="sysCompanyDto.name">
                        <el-input v-model="form.sysCompanyDto.name" placeholder="请输入机构名称"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码" prop="sysCompanyDto.cpCode">
                        <el-input maxlength="18" v-model="form.sysCompanyDto.cpCode" placeholder="请输入统一社会信用代码"></el-input>
                    </el-form-item>
                    <el-form-item label="机构类型" prop="sysUserDto.registrationType">
                        <el-select v-model="form.sysUserDto.registrationType" placeholder="请选择">
                            <el-option label="政府" value="2"></el-option>
                            <el-option label="企业" value="0"></el-option>
                            <el-option label="民非组织" value="5"></el-option>
                            <el-option label="教培组织" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="专业领域" prop="sysUserDto.managerIntroduction">
                        <el-input maxlength="500" show-word-limit  type="textarea" v-model="form.sysUserDto.managerIntroduction" placeholder="专业领域"></el-input>
                    </el-form-item>
                    <el-form-item class="newIpt" ref="headimgUpload2" label="营业执照照片" prop="sysCompanyDto.businessLicense">
                        <p class="uploadTip">上传文件不超过10M，且只能上传jpg、png类型</p>
                        <el-upload class="avatar-uploader" :action="imageUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess4" :before-upload="beforeAvatarUpload" :on-error="handleError4">
                            <img v-if="imgUrl4" :src="imgUrl4" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div class="registerBtn">
                    <el-button class="submitBtn" @click="handleSubmit()" type="primary">提交认证信息</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { enterpriseRegReal, regType, selectPark, getAddress, getIndustryType, getOnly } from "@/request/api/register"
import { getUserInfo2 } from "@/request/api/user"
import { aesEncrypt } from "@/utils/crypto.js";
import { sendEmail2 } from "@/request/api/login"
import { keyVal } from "@/request/api/link"
import rulesUtil from "@/utils/rules"
import { getEnterMsg } from "@/request/api/enterInfo"
export default {
    data() {
        return {
            passwordIndex: -1,
            typeData: [],
            imageUploadUrl: '/dev-api/file/upload/uploadNotQR',
            form: {
                sysUserDto: {
                    registrationType: "", //机构类型(0企业 2政府 5民非组织 6教培组织)
                    managerIntroduction: "", //专业领域(500长文本)
                },
                sysCompanyDto: {
                    name: "", //机构名称
                    cpCode: "", //统一社会信用代码
                    businessLicense: "", //营业执照
                }
            },
            rules: {
                sysCompanyDto: {
                    name: [
                        { required: true, message: '请输入机构名称', trigger: 'blur' },
                    ],
                    cpCode: [
                        { required: true, validator: rulesUtil.FormValidate.Form().checkUnifycode, trigger: 'blur' },
                    ],
                    businessLicense: [
                        { required: true, message: '请上传', trigger: 'change' },
                    ],
                },
                sysUserDto: {
                    registrationType: [
                        { required: true, message: '请选择机构类型', trigger: 'change' },
                    ],
                }

            },
            imgUrl4: '',//营业执照
            loading:true
        }
    },
    created() {
        this.getInfo()//企业信息
        this.getUserInfo()//用户信息
    },
    methods: {
        getUserInfo() {
            getUserInfo2().then(res => {
                this.loading=false
                if (res.data.code === 200) {
                    this.form.sysUserDto.managerIntroduction = res.data.result.managerIntroduction
                    this.form.sysUserDto.registrationType = res.data.result.registrationType
                }
            })
        },
        // 获取企业信息
        getInfo() {
            getEnterMsg().then(res => {
                if (res.data.code === 200) {
                   let companyInfo=res.data.result.sysCompanyDto
                   this.form.sysCompanyDto.name=companyInfo.name
                   this.form.sysCompanyDto.cpCode=companyInfo.cpCode
                   this.form.sysCompanyDto.businessLicense=companyInfo.businessLicense
                   this.imgUrl4=companyInfo.businessLicense
                }
            })
        },
        // 获取机构类型
        getVal3() {
            keyVal('sys_compay_type').then(res => {
                if (res.data.code === 200) {
                    this.dictionData3 = res.data.result.items
                }
            })
        },
        // 用户注册校验唯一性--用户账号、手机号码、邮箱账号
        handleOnlyVal(type, val) {
            if (val) {
                let params = {
                    type: type,
                    value: val
                }
                getOnly(params).then(res => {
                    if (res.data.code === 500) {
                        this.$message({
                            message: res.data.message,
                            type: 'warning'
                        });
                        if (type === '用户账号') {
                            this.form.sysUserDto.userName = ''
                        } else if (type === '手机号码') {
                            this.form.sysUserDto.phone = ''
                        } else if (type === '邮箱账号') {
                            this.form.sysUserDto.email = ''
                        }
                    }
                })
            }

        },
        // 判断密码强弱
        checkPassWord(value) {
            // 0： 表示第一个级别 1：表示第二个级别 2：表示第三个级别
            // 3： 表示第四个级别 4：表示第五个级别
            var modes = 0;
            if (value.length < 6) {
                //最初级别
                return modes;
            }
            if (/\d/.test(value)) {
                //如果用户输入的密码 包含了数字
                modes++;
            }
            if (/[a-zA-Z]/.test(value)) {
                //如果用户输入的密码 包含了小写的a到z
                modes++;
            }
            // if (/[A-Z]/.test(value)) {
            //     //如果用户输入的密码 包含了大写的A到Z
            //     modes++;
            // }
            if (/\W/.test(value)) {
                //如果是非数字 字母 下划线
                modes++;
            }
            switch (modes) {
                case 1:
                    return 1;
                    break;
                case 2:
                    return 2;
                    break;
                case 3:
                    return 3;
                    break;
            }
        },
        // 下一步-结果页面
        handleSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.form));
                    console.log(params,'表单数据')
                    enterpriseRegReal(params).then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: '提交成功，请等待管理员审核！',
                                type: 'success'
                            });
                            this.$emit('handleBackb')
                        } else {
                            this.$message.error(res.data.message);
                        }
                    })
                }
            });
        },
        // 上一步,返回类型页面
        prevBtn() {
            this.$emit('handleType')
        },
        // 上传文件成功-营业执照照片
        handleAvatarSuccess4(response, file) {
            this.imgUrl4 = URL.createObjectURL(file.raw);
            this.form.sysCompanyDto.businessLicense = response.message;
        },
        // 上传文件失败-营业执照照片
        handleError4(err) {
            let errInfo = JSON.parse(err["message"]);
            this.$message.error(`文件上传失败，原因：${errInfo.message}`);
        },
        // 限制上传的类型
        beforeAvatarUpload(file) {
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error("上传图片大小不能超过 10M!");
                return false;
            }
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            const extension = testmsg === "jpg" || testmsg === "JPG";
            const extension2 = testmsg === "png" || testmsg === "PNG";
            if (!extension && !extension2) {
                this.$message({
                    message: "上传图片只能是 jpg, png格式!",
                    type: "error",
                });
                return false;
            }
        },
        //发送手机验证码倒计时-邮箱
        timer() {
            if (this.time > 0) {
                this.disabled = true;
                this.time--;
                this.btnTxt = this.time + "秒";
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.btnTxt = "获取验证码";
                this.disabled = false;
            }
        },
        handleClose(val) {
            this.$refs.form.clearValidate()
        },
        // 发送手机验证码-邮箱
        getSendEmail(email) {
            let params = {
                email
            }
            sendEmail2(params).then((res) => {
                if (res.data.code === 200) {
                    this.$notify({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    this.time = 60;
                    this.timer();
                } else {
                    this.$notify({
                        title: "错误",
                        message: res.data.message,
                        type: "error",
                    });
                }
            });
        },
        // 点击获取验证码-邮箱
        logInCode() {
            if (this.form.sysUserDto.email === "") {
                this.$message({
                    message: "请输入邮箱！",
                    type: "warning",
                });
                return false;
            }
            this.getSendEmail(this.form.sysUserDto.email);
        },
        // 选择证件类型
        changeType() {
            this.form.sysCompanyDto.legalIdentityId = ''
            // 去掉某个属性的表单校验
            this.$refs.form.clearValidate('legalIdentityId')
        },
        // 返回
        handleBackTo() {
            this.$emit('handleBackb')
            // this.$router.push("/basicInfo");
        }
    },
    watch: {
        "form.sysUserDto.password": {
            handler: function (val, oldVal) {
                if (val.length == "") {
                    this.passwordIndex = -1;
                } else {
                    this.passwordIndex = this.checkPassWord(val);
                }
            },
        },
    },
}
</script>
<style lang="less" scoped>
// @import "./basicInfo.less";
.formH2 {
    float: left;

    span {
        background-color: #409eff;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }

    font-size:22px;
    color:#333;
    font-weight:800;
}

.el-input {
    width: 350px;
}

.el-input-number {
    width: 350px;
}

.el-select {
    width: 350px;
}

.el-textarea {
    width: 350px;
}

.el-cascader {
    width: 350px;
}

.enterpriseForm {
    margin-top: 50px;
}

.el-radio-group {
    width: 350px;
}

.registerBtn {
    margin-top: 40px;
    text-align: center;

    .submitBtn {
        width: 150px;
        margin-left: 20px;
    }
}

.successWrapper {
    margin-top: 40px;
    text-align: center;

    img {
        display: inline-block;
    }

    h2 {
        margin-top: 10px;
        text-align: center;
        font-size: 30px;
        color: rgb(83, 195, 27);
        letter-spacing: 2px;
    }

    p {
        font-size: 16px;
        color: #666;
        margin-top: 10px;
    }
}

.successBtn {
    margin-top: 30px;
    text-align: center;

    .backBtn {
        margin-right: 20px;
    }
}

/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
    object-fit: contain;
}

.uploadTip {
    font-size: 12px;
    color: #606266;
    line-height: 40px;
}

.newIpt {
    width: 49%;
}

.handleBack {
    color: #409eff;
    font-size: 14px;
    cursor: pointer;
    float: right;
    // position: absolute;
    // top:0;
    // right:20px;
}
</style>

